<template>
  <div class="box" :style="divStyle">
    <!-- 新报名信息 -->
    <!-- v-if="length != 0 && main.activeName == 'first'" -->
    <div class="newRegistration">
      <!-- 容器 -->
      <div class="container">
        <!-- 上边 -->
        <div class="top">
          <!-- 左边 -->
          <div class="left">
            <li>
              <span ref="status">您以查看Ta联系方式</span
              ><span class="titleInfo">招聘店铺收银员</span>
            </li>
          </div>
          <!-- 右边 -->
          <div class="right">
            <i></i>
            入职意愿高
          </div>
        </div>
        <!-- 中间 -->
        <div class="centre">
          <!-- 用户信息部分 -->
          <div class="userInfo">
            <img :src="img" alt="" @click="showResumeDetails" />
            <div>
              <p>{{ name }}<i></i></p>
              <span>{{ data }} 报名</span>
            </div>
          </div>
          <!-- 年龄岁数部分 -->
          <div class="age">
            <i class="el-icon-s-custom"></i>
            <span>{{ sex }}</span>
            <span>{{ age }}岁</span>
            <span>{{ school }}</span>
          </div>
        </div>
        <!-- 下边 -->
        <div class="bottom">
          <!-- 备注部分 -->
          <div class="remarks">
            <i class="el-icon-edit-outline"></i>
            <span v-if="!isInput" ref="remarks" @click="toggleInput('main')">{{
              nickName | isNull
            }}</span>
            <div ref="remarksDiv" v-else>
              <input
                type="text"
                ref="remarksInp"
                v-model="myRemarkInput"
                placeholder="请输入备注信息"
              />
              <button @click="confirmRemarks">确定</button>
              <button @click="cancelRemarks">取消</button>
            </div>
          </div>
          <!-- 联系部分 -->
          <div class="contactPart">
            <div @click="showContactInterphase">
              <i class="el-icon-s-comment"></i>
              <span>在线联系</span>
            </div>
            <div @click="showPhone">
              <i class="el-icon-phone"></i>
              <span ref="phone">获取手机号</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 更多简历按钮 -->
      <div class="button" @click="showResume">更多简历</div>
    </div>
    <!-- 简历详情部分组件 -->
    <ResumeDetails ref="ResumeDetails"/>
  </div>
</template>

<script>
// 引用公用样式
import "../../assets/css/all.css";
// 引入简历详情部分
import ResumeDetails from "@/components/index/ResumeDetails.vue";

export default {
  name: "",
  data() {
    return {
      // 备注信息显示
      isInput: false,
      // 备注输入框信息
      myRemarkInput: "",

      title: "招聘店铺收银员",
      img: require("@/assets/images/user.png"),
      name: "张华",
      nickName: "",
      data: "11月21日 17:39",
      sex: "女",
      age: 22,
      school: "本科",
      phone: "13513137504",
      status: "未联系",
    };
  },
  methods: {
    // 显示侧边简历信息
    showResumeDetails(){
      // alert("显示侧边简历信息");
      this.$refs.ResumeDetails.$refs.resumeDetailsDiv.style.left = "0%";
      this.$refs.ResumeDetails.$refs.resumeDetailsDiv.style.transition = "all ease .6s";
      // console.log(this.$refs.ResumeDetails.$refs.resumeDetailsDiv);
    },
    // 备注信息的显示
    toggleInput(val) {
      // 显示输入框和按钮
      this.isInput = true;
    },
    // 确定备注
    confirmRemarks() {
      if (confirm("确定要修改备注信息吗？")) {
        // 更改备注信息
        this.nickName = this.myRemarkInput;
        this.isInput = false;
      }
    },
    // 取消备注
    cancelRemarks() {
      this.isInput = false;
    },
    // 打开联系界面
    showContactInterphase() {
      alert("打开联系界面！");
    },
    // 显示手机号
    showPhone() {
      this.$refs.phone.innerHTML = this.phone;
    },
    // 更多简历
    showResume() {
      alert("打开更多简历界面！");
    },
  },
  components: { ResumeDetails },
  props: {
    width: {
      type: Number,// 传递过来的类型
      default: 930 // 默认值
    }
  },
  computed: {
    // 盒子样式
    divStyle(){
      return {
        width: this.width + "px"
      }
    }
  }
};
</script>

<style scoped>
.newRegistration {
  max-width: inherit;
  height: 330px;
}
/* 容器 */
.newRegistration .container {
  height: 200px;
  border-radius: 5px;
  background: white;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
/* 上边 */
.newRegistration .top {
  width: 100%;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
}
/* 左边 */
.newRegistration .top .titleInfo {
  color: #808999;
  padding-left: 10px;
}
/* 右边 */
.newRegistration .top .right {
  color: #1ecdb9;
}
.newRegistration .top .right i {
  width: 8px;
  height: 12px;
  border-radius: 50%;
  /* border: 1px solid black; */
}
/* 中间 */
.newRegistration .centre {
  height: 140px;
  margin: 20px 0 30px;
}
/* 用户信息部分 */
.newRegistration .centre .userInfo {
  max-width: 300px;
  text-align: left;
  display: flex;
}
.newRegistration .centre .userInfo img {
  width: 42px;
  height: 42px;
  border-radius: 5px;
  margin-right: 20px;
}
.newRegistration .centre .userInfo span {
  color: #808999;
  font-size: 14px;
}
/* 年龄岁数部分 */
.newRegistration .centre .age {
  max-width: 300px;
  height: 24px;
  line-height: 24px;
  color: #58586a;
  font-size: 14px;
  margin: 10px 0;
  display: flex;
  justify-content: space-around;
}
.newRegistration .centre .age i {
  width: 20px;
  border-radius: 50%;
  background: #f6f7fb;
}
.newRegistration .centre .age span {
  width: 38px;
  background: #f6f7fb;
}
/* 下边 */
.newRegistration .bottom {
  width: 100%;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* 备注部分 */
.newRegistration .bottom .remarks {
  color: #808999;
}
.newRegistration .bottom .remarks div {
  color: #b5bac7;
  display: inline-block;
}
.newRegistration .bottom .remarks div input {
  color: #606266;
  font-size: 14px;
  outline: none;
  border: none;
}
.newRegistration .bottom .remarks div button {
  color: #b5bac7;
  font-size: 14px;
  margin: 0 5px;
  border: none;
  background: none;
  cursor: pointer;
}
/* 联系部分 */
.newRegistration .bottom .contactPart {
  color: #172238;
  font-weight: 700;
  display: flex;
  justify-content: space-around;
}
.newRegistration .bottom .contactPart div {
  cursor: pointer;
  margin: 0 15px;
}
/* 更多简历按钮 */
.newRegistration .button {
  width: 100%;
  height: 60px;
  line-height: 60px;
  color: #666;
  font-size: 14px;
  cursor: pointer;
  border-radius: 5px;
  background: white;
  transition: all ease 0.6s;
  margin-top: 24px;
}
.newRegistration .button:hover {
  color: white;
  background: #1ecdb9;
  transition: all ease 0.6s;
}
</style>